<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* #app{
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			#app>div{
				width: 50px;
				height: 50px;
				background-color: red;
				border-radius: 100%;
			} */
			html,body{
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			#app{
				width: 100%;
				height: 100%;
				overflow: hidden;
				position: relative;
			}
			#app>div.ball{
				border-radius: 100%;
				position: absolute;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <div></div> -->
		</div>
		<script type="text/javascript">
			
			//构造函数
			function Ball(color,top,left,width){
				//共有属性
				this.color=color;
				this.top=top;
				this.left=left;
				this.width=width;
			}
			//私有属性
			Ball.prototype.create=function(){
				//Ball所创建的小球共有的属性
				var app=document.getElementById("app");
				//创建一个div	
				var div=document.createElement("div");
				//放置div的位置
				app.appendChild(div);
				
				//给div分类命名
				div.className="ball";
				
				//给div加样式
				div.style.width=div.style.height=this.width+"px";
				div.style.top=this.top+"px";
				div.style.left=this.left+"px";
				div.style.backgroundColor=this.color;
				
				//小球存在的时间
				var t1=setTimeout(function(){
					app.removeChild(div)
				},2000)
				
			}
			
			// var b1=new Ball("red",50,100,60);
			// console.log("b1:",b1);
			//创建一个小球设置宽高
			function myBall(){
				var color=getColor();
				var top=getMax(850);
				var left=getMax(1850);
				var width=getMax(100);
				
				//控制小球大小
				width>=30?width:width=30;
				
				var b=new Ball(color,top,left,width);
				b.create();
				// console.log("b:",b);
				//测试函数是否运行正常
			}
			
			
			function getColor(){
				var color=`rgb(${getMax(256)},${getMax(256)},${getMax(256)})`;
				return color;
			}
			
			function getMax(n){
				return parseInt(Math.random()*n);
			}
			
			//创建小球的速度
			var t2=setInterval(function(){
				myBall();
			},100)
			
		</script>
	</body>
</html>
